<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>儿童节快乐</h1>
    </header>

    <hr />

    <!-- 主导航 -->
    <nav>
      <a href="#">首页</a>
      <a href="#">订单</a>
      <a href="#">购物车</a>
      <a href="#">我的</a>
    </nav>

    <!-- 主要内容 -->
    <div class="page-content">
      <!-- 文章 -->
      <article>
        <h2>《如何一夜暴富》</h2>
        <section>
          <h3>
            第一种方式：通过做梦
            <p>该怎么做：xxxxxxxxxxxxxxxx</p>
          </h3>
        </section>
        <section>
          <h3>
            第二种方式：买彩票
            <p>该怎么做：xxxxxxxxxxxxxxxx</p>
          </h3>
        </section>
        <section>
          <h3>
            第三种方式：学习前端
            <p>该怎么做：好好学习</p>
          </h3>
        </section>
      </article>
    </div>
    <!-- 侧边栏 -->
    <aside>
      <h2>热门文章</h2>
      <nav>
        <ul>
          <li>
            <a href="#">如何一夜暴富</a>
          </li>
          <li>
            <a href="#">买彩票</a>
          </li>
          <li>
            <a href="#">学习前端</a>
          </li>
        </ul>
      </nav>
    </aside>
    <hr />
    <!-- 页脚 -->
    <footer>
      <nav>
        <a href="#">友情链接1</a>
        <a href="#">友情链接2</a>
        <a href="#">友情链接3</a>
        <a href="#">友情链接4</a>
        <a href="#">友情链接5</a>
      </nav>
    </footer>
  </body>
</html>
